<template>
  <view>
    <uni-file-picker limit="5" file-mediatype="all" ref="uploadBox"
	  @progress="progress" 
	  @success="success" 
	  @fail="fail" 
	  @select="select">
      <button class="upload_btn">{{text}}</button>
      </uni-file-picker>
      <!-- 回显列表 -->
      <view v-if="fileList !== ''">
	    <view class="show_file" v-for="item,index in fileList" :key="index">
	    <view class="file-item">
	  <!-- 图标显示 -->
	    <i class="iconfont" style="color:#4482E0;font-size: 70rpx;" v-if="item.extname == 'doc'">&#xe65b;</i>
	    <i class="iconfont" style="color:#4482E0;font-size: 70rpx;" v-if="item.extname == 'docx'">&#xe65a;</i>
	    <i class="iconfont" style="color:#FA4E4E;font-size: 70rpx;" v-if="item.extname == 'pdf'">&#xe663;</i>
	    <i class="iconfont" style="color:#1ADF74;font-size: 70rpx;" v-if="item.extname == 'xlsx'">&#xe666;</i>
	    <i class="iconfont" style="color:#1ADF74;font-size: 70rpx;" v-if="item.extname == 'xls'">&#xe666;</i>
	    <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'png'">&#xe665;</i>
	    <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'jpg'">&#xe662;</i>
	    <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'jpeg'">&#xe661;</i>
	    <i class="iconfont" style="color:#FF8976;font-size: 70rpx;" v-if="item.extname == 0">&#xe65d;</i>
	    <view style="padding:10rpx 20rpx 0 20rpx;">
	      <view class="title">{{item.name}}</view>
	      <view class="result">
	       <span> <i class="iconfont text-primary" style="font-size:24rpx;">&#xe615;</i>文档已加密</span>
	       <span style="margin-left: 20rpx;">{{(item.size/1024).toFixed(2)}}kb</span>
	       <span style="margin-left: 20rpx;">{{statusname}}</span>
	       <i class="iconfont" style="color:#00B42A;font-size:24rpx;margin-left:10rpx;" v-if="item.status === 'success'">&#xe69e;</i>
	       </view>
	      </view>
	    <view class="close" @click="removeMedical(item,index)"><i class="iconfont" style="font-size: 28rpx;">&#xe903;</i></view>
	  </view>
	  </view>
	      <ul v-if="isShowPreview">
	        <li><button>预览</button></li>
	      </ul>
	    </view>
  </view>
</template>

<script>
import {getToken} from "@/utils/auth";
import config from '@/config'
import {delAppendId, getAppendByContractId} from "@/api/ec/work/contract/contract";

export default {
  props: {
    value: [String, Object, Array],
    // 图片数量限制
    limit: {
      type: Number,
      default: 10,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    // 合同id
    contractId: {
      type: Number,
      default: 0,
    },
    // 是否显示预览
    isShowPreview: {
      type: Boolean,
      default: false,
    },
    uploadFileUrl:{
      type: String,
    },
    // 上传文件类型 1 合同模板word  2附件
    uploadType:{
      type: Number,
      default: 1,
    },
	text:{
	  type:String,
	}
  },
  data() {
    return {
	  size: '',
	  statusname: '上传中',
	  percentage: 0,
	  fileList: [],
	  fileId: '',
    };
  },
  created() {
    getAppendByContractId(this.contractId).then(res=>{
      this.fileLists = res.data;
	  this.statusname = '上传成功'
    })
  },
  methods: {
	  // 确定
	  async submitUpload() {
	    // 预上传的文件list
	    this.$emit("getId", this.fileList);
	    // 回调上传了几个文件 显示
	    this.$emit('changeValue',this.fileList.length);
	  },
	  // 刷新上传的列表
	  refreshFileList(fileList){
	    // 操作删除回调
	    this.fileList=fileList;
	    this.$emit('changeValue',this.fileList.length);
	  },    
	  // 这里的方法是请求最后一次
	  debounce(fn, waits) {
	    if (this.timer) {
	      clearTimeout(this.timer);
	      this.timer = null;
	    }
	    this.timer = setTimeout(() => {
	      fn.apply(this, arguments); // 把参数传进去
	    }, waits);
	  },    
	  // 获取上传状态
	 select(e){
		this.$emit("getId", e.tempFiles);
		this.fileList.push(e.tempFiles[0])
		const tempFilePaths = e.tempFilePaths;
		this.debounce(this.submitUpload, 500);		
	 }, 
	 // 删除文件
      removeMedical(file,index){
		this.fileList.splice(index, 1)
		if (!!file.id) {
		  delWordFile(file.id).then(res => {
		      this.$modal.msgSuccess("删除成功");
		    })
		  }      
		if (!!file.response) {
		  delWordFile(file.response.fileId).then(res => {
		    this.$modal.msgSuccess("删除成功");
		  })
		}
		this.$emit('changeValue', this.fileList.length);
	  },
	  // 获取上传进度
	  progress(e){
	  	console.log('上传进度：',e)
	  },			
	 // 上传成功
	 success(e){
	 	console.log('上传成功')
	 }, 			
	 // 上传失败
	 fail(e){
	 	console.log('上传失败：',e)
	 } 			
	},
};
</script>
<style lang="scss" scoped>
// 不显示原生list样式
::v-deep .uni-file-picker__lists{display: none;}
.progressStyle{
  opacity:0;
  animation-name:fadenum;
  animation-duration:2s;
}

@keyframes fadenum{

0%{opacity:1;}

99%{opacity:1;}

100%{opacity:0;}

}
  // 进度条文字消失
::v-deep .el-progress__text{
    display: none;
  }
.upload_btn{
  background-color: #fff;
  width: 310rpx;
  font-size: 26rpx;
  margin-left: 0;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #999;

  &:hover{
    color: #11A983;
    border-color: #b8e5da;
    background-color: #e7f6f3;
  }
  .iconfont{font-size: 28rpx;margin-right: 5rpx;}
}
@keyframes cloudLeft{
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.close{
  color: #86909c;
  position: absolute;
  right: 12rpx;
}
.show_file{
  position: relative;
  border-style: none;
  background: #F2F3F5;
  // border: 1rpx solid #cccccc;
  margin:20rpx 0 20rpx 0;
  width:680rpx;
  align-items: center;
  border-radius: 8rpx;
  overflow: hidden;
  animation: wrapper-gradient 1s linear;
  animation-name: cloudLeft;
  padding:10rpx 40rpx 10rpx 20rpx;
  height: 100rpx;
  &:hover{
    color: #11A983;
    border-color: #b8e5da;
    background-color: #e7f6f3;
  }
.file-item{
  display: flex;
  align-items: center;
}
.title{
        width:100%;
        margin: 0;
        font-size: 28rpx;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1; //显示行数
        display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*伸缩盒子的排列方式：从上到下垂直*/
        color: #666666;
        line-height: 30rpx;

    }
.result{
    font-size:24rpx;
    margin: 0;
    // padding-top:7rpx;
    color:#86909c;
    line-height: 34rpx;
    }
  }
</style>
